<!--  -->
<template>
  <div class="charts" ref="charts">zhu zhuang tu</div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'ProgressCharts',
  data() {
    return {}
  },
  mounted() {
    let progressCharts = echarts.init(this.$refs.charts)
    progressCharts.setOption({
      xAxis: {
        show: false,
        min: 0,
        max: 100,
      },
      yAxis: {
        show: false,
        type: 'category',
      },
      series: [
        {
          type: 'bar',
          data: [78],
          color: 'yellowgreen',
          showBackground: true,
          backgroundStyle: {
            color: '#eee',
          },
          barWidth: 15,
          //显示文本默认居中
          label: {
            formatter:'|', //文本内容替换为 | 自定义文本内容
            position:'right',  //文本内容默认为居中,替换为right
            show: true,
          },
        },
      ],
      tooltip: {},
      //布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    })
  },
}
</script>
<style lang='scss' scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>